<template>
  <el-dialog v-bind="$attrs" @close="$emit('close')" width="486px">
    <div class="header" slot="title">
      <div class="title">分享章节</div>
      <el-tooltip
        content="将本章内容通过链接分享给好友"
        placement="right-start"
        effect="light"
      >
        <i class="el-icon-question"></i>
      </el-tooltip>
    </div>
    <div class="linkInput">
      <input
        type="text"
        placeholder="通过该链接进入的人员"
        v-model="form.title"
        disabled
      />
      <el-select v-model="form.type">
        <el-option value="1" label="可查看"></el-option>
        <!-- <el-option value="2" label="可评论"></el-option> -->
      </el-select>
      <div class="linkBtn" @click="handleCopyLink">复制链接</div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {
        title: "",
        type: "1",
      },
    };
  },
  methods: {
    handleCopyLink() {
      console.log(this.url);
      const textarea = document.createElement("textarea");
      textarea.value = location.origin + this.url;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
      this.$message.success("复制成功");
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .header {
  display: flex;
  align-items: center;

  i {
    color: #165deb;
    margin-left: 4px;
    font-size: 16px;
  }
}

::v-deep .el-dialog__body {
  padding: 32px 34px 40px 32px;
  padding-bottom: 40px !important;
}

.linkInput {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px 6px 6px 6px;
  background: #ffffff;
  width: 420px;
  height: 48px;
  display: flex;
  overflow: hidden;

  input {
    flex: 1;
    outline: none;
    border: none;
    padding: 13px 12px 13px 16px;
    background: #fff;
  }

  .linkBtn {
    width: 112px;
    height: 48px;
    background: #165deb;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    line-height: 48px;
    text-align: center;
    cursor: pointer;
  }

  .el-select {
    width: 104px;

    ::v-deep .el-input {
      input {
        height: 46px;
        border: 0;
      }
    }
  }
}
</style>
